frontend/pages/e/[uuid]/prices.tsx (view raw)
1import {PropsWithChildren} from 'react';
2import {
3 EventByUuidDocument,
4 Module,
5 ModuleDocument,
6 Enum_Userspermissionsuser_Lang as SupportedLocales,
7} from '../../../generated/graphql';
8import EventLayout, {TabComponent} from '../../../layouts/Event';
9import useEventStore from '../../../stores/useEventStore';
10import {Box, Container, Paper, useTheme} from '@mui/material';
11import Head from 'next/head';
12import {useSession} from 'next-auth/react';
13import pageUtils from '../../../lib/pageUtils';
14import {getLocaleForLang} from '../../../lib/getLocale';
15
16interface Props {
17 modulesSettings?: Module;
18 eventUUID: string;
19 announcement?: string;
20}
21
22const Page = (props: PropsWithChildren<Props>) => {
23 return <EventLayout {...props} Tab={PricesPage} />;
24};
25
26const PricesPage: TabComponent<Props> = ({modulesSettings}) => {
27 const theme = useTheme();
28 const event = useEventStore(s => s.event);
29 const session = useSession();
30 const profile = session?.data?.profile;
31
32 const carosterPlusActivated =
33 modulesSettings?.caroster_plus_enabled &&
34 event?.enabled_modules?.includes('caroster-plus');
35
36 if (!event && !carosterPlusActivated) return null;
37
38 return (
39 <Box position="relative">
40 <Head>
41 <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
42 </Head>
43 <Container
44 sx={{
45 p: 4,
46 mt: 6,
47 mb: 11,
48 mx: 0,
49 [theme.breakpoints.down('md')]: {
50 p: 2,
51 mt: 13,
52 },
53 }}
54 >
55 <Box component={Paper} mb={4}>
56 {/* @ts-ignore */}
57 <stripe-pricing-table
58 pricing-table-id={modulesSettings.caroster_plus_pricing_grid_id}
59 publishable-key={modulesSettings.caroster_plus_publishable_key}
60 client-reference-id={event.uuid}
61 customer-email={profile?.email}
62 />
63 </Box>
64 </Container>
65 </Box>
66 );
67};
68
69export const getServerSideProps = pageUtils.getServerSideProps(
70 async (context, apolloClient) => {
71 const {uuid} = context.query;
72 const {host = ''} = context.req.headers;
73 let event = null;
74 let modulesSettings = null;
75
76 // Fetch event
77 try {
78 const {data} = await apolloClient.query({
79 query: EventByUuidDocument,
80 variables: {uuid},
81 });
82 event = data?.eventByUUID?.data;
83 } catch (error) {
84 return {
85 notFound: true,
86 };
87 }
88
89 // Fetch module settings
90 try {
91 const {data} = await apolloClient.query({
92 query: ModuleDocument,
93 variables: {locale: context.locale},
94 });
95 modulesSettings = data?.module?.data?.attributes || {};
96
97 if (!modulesSettings?.caroster_plus_pricing_grid_id) {
98 console.warn(
99 'Module settings are not set for locale: ',
100 context.locale,
101 ' fallback to English'
102 );
103 const {data: enData} = await apolloClient.query({
104 query: ModuleDocument,
105 variables: {locale: SupportedLocales['en']},
106 });
107 modulesSettings = enData?.module?.data?.attributes;
108 }
109 } catch (error) {
110 console.error("Can't fetch config for module: ", error);
111 }
112
113 const description = await getLocaleForLang(
114 event?.attributes?.lang,
115 'meta.description'
116 );
117
118 return {
119 props: {
120 modulesSettings,
121 eventUUID: uuid,
122 metas: {
123 title: event?.attributes?.name || '',
124 description,
125 url: `https://${host}${context.resolvedUrl}`,
126 },
127 },
128 };
129 }
130);
131
132export default Page;